<!--工艺流程主组件-->
<template>
  <div class="page-box">
    <div class="page-search">
      <div>
        <label>路线编号</label>
        <el-input v-model="searchForm.RouteCode" style="width: 160px;" placeholder="请输入路线编号"></el-input>
      </div>
      <div>
        <label>路线名称</label>
        <el-input v-model="searchForm.RouteName" style="width: 160px;" placeholder="请输入路线名称"></el-input>
      </div>
      <div>
        <label>是否启用</label>
        <el-select v-model="searchForm.EnableFlag" style="width: 160px;" placeholder="是否启用">
          <el-option label="是" value="Y"></el-option>
          <el-option label="否" value="N"></el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <div class="page-section">
      <div class="page-tool">
        <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
        <el-button type="danger" plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>
        <el-dropdown class="mg-l">
          <el-button size="small" type="primary" plain>
            <i class="el-icon-s-grid"></i>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>


      <!--表单-->
      <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column fixed prop="RouteCode" label="工艺路线编号" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="RouteName" label="工艺路线名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="RouteDesc" label="工艺路线说明" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="EnableFlag" label="是否启用" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.EnableFlag === 'Y'">是</el-tag>
            <el-tag type="warning" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>

        <el-table-column label="操作" :show-overflow-tooltip="true" width="160">
          <template slot-scope="scope">
            <el-button type="text" @click="update(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
            <el-button type="text" @click="details(scope.row)">明细</el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
        :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
    </div>

    <!--弹窗-->
    <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
      width="60%" @close="closeDialog">
      <ProRouteInput :model="model" :isUpdate="isUpdate" @callback="callback"
        v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 0" />
      <ProRouteDetails :model="model" v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 1" />
    </el-dialog>

  </div>
</template>

<script>
import ProRouteInput from './components/ProRouteInput.vue'
import ProRouteDetails from './components/ProRouteDetails.vue'
import Pagination from '@/components/Pagination.vue'
export default {
  components: {
    ProRouteInput,
    ProRouteDetails,
    Pagination
  },
  mounted() {
    this.dataBind();
  },
  data() {
    return {
      //数据模型
      model: {
        RouteCode: '',
        RouteName: '',
        RouteDesc: '',
        EnableFlag: '',
        Remark: ''
      },
      //搜索字段
      searchForm: {
        RouteCode: '',
        RouteName: '',
        EnableFlag: ''
      },
      //对话框对象
      dialogDomain: {
        title: '新增工艺流程',
        dialogVisible: false,
        dialogType: 0
      },
      pageDomain: {
        PageIndex: 1,
        PageSize: 10,
        TotalCount: 0
      },
      isUpdate: false,
      isLoading: false,
      tableData: []
    }
  },
  methods: {
    //新增按钮
    add() {
      this.dialogDomain.title = "新增工艺流程"
      this.dialogDomain.dialogVisible = true
      this.isUpdate = false
      this.dialogDomain.dialogType = 0
    },
    //编辑按钮
    update(model) {
      this.dialogDomain.title = "编辑工艺流程"
      this.dialogDomain.dialogVisible = true
      this.isUpdate = true
      this.model = model
      this.dialogDomain.dialogType = 0
    },
    details(model) {
      this.dialogDomain.title = "工艺流程计划明细"
      this.dialogDomain.dialogVisible = true
      this.model = model
      this.dialogDomain.dialogType = 1
    },
    //批量删除
    dels() {
      if (this.$refs.dataForm.selection.length <= 0) {
        this.showNotify('请先选择一项')
        return;
      }
      this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          //获取选中的表格数据 并筛选id
          var Ids = this.$refs.dataForm.selection.map(x => x.Id)
          //拼接参数
          let params = new URLSearchParams();
          params.append('Ids', Ids.join(','))
          this.$http.delete('/api/ProRoute/DelAll', {
            data: params,
            headers: {
              'content-Type': 'application/x-www-form-urlencoded'
            },
            loading: this.$loading()
          })
            .then((res) => {
              this.showNotify('操作成功', 'success');
              this.dataBind();
            })
        }).catch(() => { });
    },
    //删除单条
    del(model) {
      this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.delete('/api/ProRoute', {
            data: {
              Id: model.Id
            },
            headers: {
              'content-Type': 'application/x-www-form-urlencoded'
            }
          })
            .then((res) => {
              this.showNotify('操作成功', 'success');
              this.dataBind();
            })
        }).catch(() => { });
    },
    //对话框关闭事件
    closeDialog() {
      this.model = {
        RouteCode: '',
        RouteName: '',
        RouteDesc: '',
        EnableFlag: '',
        Remark: ''
      }
    },
    search() {
      this.pageDomain.PageIndex = 1;
      this.dataBind();
    },
    reset() {
      this.searchForm.RouteCode = ''
      this.searchForm.RouteName = ''
      this.searchForm.EnableFlag = ''
    },
    //新增或编辑页面回调
    callback() {
      let actionName = this.isUpdate ? '编辑' : '新增';
      this.showNotify(actionName + '工艺流程计划成功', 'success');
      this.dialogDomain.dialogVisible = false;
      this.dataBind();
    },
    //分页方法
    handleSizeChange(val) {
      this.pageDomain.PageIndex = 1;
      this.pageDomain.PageSize = val;
      this.dataBind();
    },
    handleCurrentChange(val) {
      this.pageDomain.PageIndex = val;
      this.dataBind();
    },
    //获取数据
    dataBind() {
      this.isLoading = true;
      this.$http.get('/api/ProRoute',
        {
          params: {
            PageIndex: this.pageDomain.PageIndex,
            PageSize: this.pageDomain.PageSize,
            RouteCode: this.searchForm.RouteCode,
            RouteName: this.searchForm.RouteName,
            EnableFlag: this.searchForm.EnableFlag
          }
        })
        .then(res => {
          this.tableData = res.Data;
          this.pageDomain.TotalCount = res.Count;
          this.isLoading = false;
        })
    },
    //导出
    exports() {
      this.$confirm('即将导出报表，是否继续？', '系统提示', {
        confirmButtonText: '导出',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.request({
          method: 'GET',
          loading: this.$loading(),
          url: '/api/ProRoute/Export',
          responseType: 'blob'
        }).then((res) => {
          const blob = new Blob([res])
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob)
          downloadElement.href = href
          downloadElement.download = '工艺流程信息.xls'
          downloadElement.click()
          window.URL.revokeObjectURL(href)
        })
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>
<style scoped></style>
